<template>
  <div class="columlist">
    <a-collapse v-model="activeKey" expand-icon-position="right">
      <a-collapse-panel key="1" :header="title">
        <a-list :data-source="colunms">
          <!-- ----------- -->
          <a-list-item slot="renderItem" slot-scope="item">
            <div class="list-row">
              <div class="list-c">
                {{ item.title }}
              </div>
              <span :class="{ 'list-r': 1, 'blue-color': getIsInClounmList }">
              {{
                datas[item.dataIndex] || ""
              }}
              <!-- {{item.dataIndex}} -->
              </span>
            </div>
            <div class="list-row-old" v-if="getIsDataOrigin">
              <div class="list-c">
                原始：
              </div>
              <span class="list-r">{{ originalData[item.dataIndex] || '' }}</span>
            </div>
          </a-list-item>

          <!-- --------------- -->
          <div slot="footer">
            <div
              class="list-collapse-sq"
              @click="
                () => {
                  !getIsInClounmList
                    ? (activeKey = -1)
                    : (activeKey2 = activeKey2 === -1 ? 1 : -1);
                }
              "
            >
              <span v-show="activeKey2 !== 1">{{ footTitle }}</span>
              <img
                v-show="activeKey2 !== 1"
                :class="{ shouqi: activeKey2 !== 1 && getIsInClounmList }"
                src="~@/assets/img/collapse-sq.png"
                alt="icon"
              />
            </div>
            <div class="moremsg">
              <a-collapse v-model="activeKey2" v-if="getIsInClounmList">
                <a-collapse-panel key="1" header="cqc">
                  <!-- ------------------------------------------------------ -->
                  <a-list :data-source="allColunms">
                    <a-list-item slot="renderItem" slot-scope="item">
                      <div class="list-row">
                        <div class="list-c">
                          {{ item.title }}
                        </div>
                        <span
                          :class="{
                            'list-r': 1,
                          }"
                          >{{ filterTitles(item.dataIndex) }}</span
                        >
                      </div>
                    </a-list-item>
                    <div slot="footer">
                      <div
                        class="list-collapse-sq"
                        @click="
                          () => {
                            !getIsInClounmList
                              ? (activeKey = -1)
                              : (activeKey2 = activeKey2 === -1 ? 1 : -1);
                          }
                        "
                      >
                        <span>收起</span>
                        <img
                          :class="{
                            shouqi: activeKey2 !== 1 && getIsInClounmList,
                          }"
                          src="~@/assets/img/collapse-sq.png"
                          alt="icon"
                        />
                      </div>
                    </div>
                    <!-- ------------------------------------------------------ -->
                  </a-list>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </div>
        </a-list>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script type="text/ecmascript-6">
/*eslint-disable*/
export default {
  data() {
    return {
      activeKey:-1,
      activeKey2:-1,
    }
  },
  computed:{
    getIsInClounmList(){
      return this.footTitle !== '收起'
      // return Object.keys(this.originalData).length > 0
    },
    getIsDataOrigin(){
      return Object.keys(this.originalData).length > 0
    }
  },
  methods: {
    filterTitles(key){
      const { datas } = this
      let title = datas[key]
      if (key === 'budgetType') {
        return title === 0 ? '调整数据' : '原始数据'
      }
      if (key === 'isBuy') {
        return title === 0 ? '非采购' : '采购'
      }
      return title || ''
    }
  },
  props:{
    footTitle:{
      type:String,
      required:true
    },
    title:{
      type:String,
      required:true
    },
    isCollapsed:{
      type:Boolean,
      default:false
    },
    //未调整字段
    allColunms:{
      type:Array,
      default(){
        return []
      }
    },
    colunms:{
      type:Array,
      default(){
        return []
      }
    },
    datas:{
      type:Object,
      default(){
        return {}
      }
    },
    originalData:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  watch:{
    isCollapsed:{
      handler:function(newV) {
        if (newV) {
          this.activeKey = 1
        }
      },
      immediate:true
    }
  }
}
</script>

<style lang="less" scoped>
// border-bottom: 1px solid #d9d9d9;
.columlist {
  margin: 7px 0;
  /deep/ .ant-collapse > .ant-collapse-item:last-child,
  /deep/.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
    border-radius: 0;
  }
}
/deep/ .ant-collapse {
  border-radius: 0;
  border: none;
  .ant-collapse-header {
    background-color: #ffffff;
    font-size: 17px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    // border-bottom: 1px solid #d9d9d9;
  }
  .ant-collapse-content {
    > .ant-collapse-content-box {
      padding: 0;
      padding-left: 14px;
    }
  }
}

/deep/ .ant-list {
  border-radius: 0;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  .ant-list-item {
    padding: 12px 0;
  }
}

.list-row,
.list-row-old {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 12px);
  .list-c {
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    max-width: 40%;
  }
  .list-r {
    margin-right: 3px;
    max-width: 50%;
    text-align: right;
  }
}

.list-row-old {
  font-size: 14px;
  .list-c {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
}
.list-collapse-sq {
  display: flex;
  align-items: center;
  justify-content: center;

  > img {
    width: 16px;
    height: 16px;
    margin: 0 8px;
  }
}
/deep/ svg {
  width: 16px;
  height: 16px;
  color: #999999;
}
.shouqi {
  transition: 0.3s linear;
  transform: rotate(180deg);
}
.blue-color {
  color: #3296fa;
}
.moremsg {
  /deep/.ant-list-header,
  /deep/.ant-list-footer {
    padding-top: 6px;
    padding-bottom: 0px;
  }
  /deep/ .ant-collapse-content {
    > .ant-collapse-content-box {
      padding: 0;
      padding-left: 0;
    }
  }
  /deep/ .ant-collapse {
    .ant-collapse-header {
      display: none;
    }
    .ant-collapse-content {
      border-top: none;
    }
    .ant-collapse-item {
      border-bottom: none;
    }
  }
}
</style>
